<template>
  <div id="more-home">
    <div class="llef">
      <div class="top">
        <img src="../../logo1.png" alt="" />
        <p>健康管理</p>
      </div>
      <div class="mainbox">
        <div
          :class="item.name == checkmenu ? 'box active' : 'box'"
          v-for="(item, index) in menulist"
          :key="item._id"
        >
          <RouterLink :to="item.url" @click="store.upceckmenu(item.name)">
            <component :is="menuarr[index]" class="icon" />
          </RouterLink>
        </div>
      </div>
    </div>
    <div class="left">
      <div class="top">
        {{ checkmenu }}
      </div>
      <div class="main">
        <div
          :class="isActive === item.url ? 'box active' : 'box'"
          v-for="(item, index) in list"
          :key="item._id"
        >
          <RouterLink :to="item.url">{{ item.name }}</RouterLink>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="righ">
          <p>
            <svg
              t="1732018592357"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3064"
              width="30"
              height="30"
            >
              <path
                d="M515.530406 770.231319c4.366448 0 8.812713-0.267083 13.284561-0.800225 42.889833-5.14723 79.310324-35.124985 92.75452-76.437903 1.01205-3.093455-0.452301-6.40078-3.40761-7.760754-2.928702-1.359974-6.469342-0.186242-8.119935 2.586918-0.159636 0.267083-17.198707 27.79095-83.542718 36.752042-9.930163 1.333368-19.594267 2.02717-28.752858 2.02717-46.483684-0.026606-67.196425-17.548678-67.382667-17.709337-2.342348-2.080382-5.910617-2.133593-8.306176-0.106424-2.422166 2.02717-2.981914 5.547343-1.331321 8.241708C440.960037 749.82864 477.273081 770.231319 515.530406 770.231319zM872.252901 359.078145c-0.586354 0-1.118474 0.106424-1.677199 0.106424C831.705416 190.893678 683.175591 65.355497 505.09473 65.355497c-182.979428 0-334.916862 132.473127-368.595916 307.724547-32.745798 5.894244-57.665351 34.671661-57.665351 69.477374l0 139.300626c0 39.045271 31.309076 70.703295 69.965491 70.703295 21.804608 0 41.052998-10.29446 53.858652-26.110681 30.934546 81.82254 93.922113 147.803277 173.627433 182.610014 0.191358-0.415462 1.700735-3.348258 3.514033-5.685489 1.257643-1.620917 2.660596-2.952238 3.868097-2.952238 1.251503 0 2.396583 0.453325 3.381004 1.147126-18.450211-13.735839-85.086887-84.33271-99.516528-182.853561-6.336312-43.366693 26.143427-85.932138 63.975057-92.973508 60.727083-11.308557 121.134895-24.189935 181.861978-35.284621 38.603203-7.04137 64.987107-28.217668 81.120552-63.475683 3.780093-8.241708 9.238408-24.910343 11.741415-48.940642 0.665149-3.573385 3.593851-6.320962 7.348362-6.320962 2.503007 0 4.632507 1.280156 6.043646 3.120061l1.677199-1.039679c23.934109 34.751478 71.403237 111.695918 78.218456 192.827727 7.827269 92.76066 3.460822 156.289556-67.542302 221.285872-0.079818 0.079818-0.186242 0.186242-0.292666 0.267083-0.985444 1.066285-1.570775 2.453888-1.570775 3.973498 0 2.000564 1.065262 3.707438 2.609431 4.747117 0.585331 0.240477 1.171686 0.559748 1.757017 0.800225 0.478907 0.106424 0.931209 0.267083 1.411139 0.267083 0.479931 0 0.905626-0.159636 1.331321-0.267083 1.01205-0.533143 1.969864-1.147126 2.955308-1.680269 71.802326-39.552831 126.884852-105.615433 152.336524-185.066973 10.302647 15.308661 26.436092 26.323529 45.178969 30.163997-30.057573 136.713708-151.990646 222.272339-303.050084 235.261165-9.052167-22.456455-31.335682-38.405705-57.505715-38.405705-34.183544 0-61.898769 27.070542-61.898769 60.435441s27.714202 60.408835 61.898769 60.408835c27.554566 0 50.637284-17.709337 58.650795-42.032302 174.859493-14.21577 315.02993-118.150934 344.289324-279.640931 25.850761-10.80202 44.007283-36.165688 44.007283-65.769936L944.083879 430.42203C944.081833 391.029858 911.920342 359.078145 872.252901 359.078145zM807.744701 399.564231C762.140037 276.026614 643.960451 187.773617 504.935094 187.773617c-138.440026 0-256.192893 87.505983-302.224276 210.243375-2.289136-2.800789-4.978385-5.200442-7.614421-7.627724C221.160006 240.820788 349.882716 127.0977 505.09473 127.0977c154.467047 0 282.789645 112.602567 309.705668 261.131369C812.137755 391.803477 809.68796 395.537522 807.744701 399.564231zM376.292202 809.063743c-0.00307-0.001023-0.005117-0.002047-0.008186-0.00307C376.255363 809.125141 376.25434 809.133328 376.292202 809.063743z"
                fill="#2c2c2c"
                p-id="3065"
              ></path>
            </svg>
          </p>
          <p>
            <svg
              t="1732018678035"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6442"
              width="30"
              height="30"
            >
              <path
                d="M512 960c49.6 0 88-38.4 88-88H424c0 49.6 38.4 88 88 88z m288.8-286.4V444.8c0-137.6-97.6-252.8-224.8-283.2v-28.8c0-32-17.6-60.8-48-67.2-44-10.4-80 23.2-80 66.4v30.4C320.8 192 223.2 307.2 223.2 444.8v228.8L136 763.2v44.8h752v-44.8l-87.2-89.6z"
                p-id="6443"
                fill="#2c2c2c"
              ></path>
            </svg>
          </p>
          <div class="user">
            <a-popover trigger="click" placement="bottom">
              <template #content>
                <div
                  @click="Jump"
                  style="width: 150px; height: 30px; line-height: 30px; cursor: pointer"
                >
                  个人资料
                </div>
                <div
                  @click="router.push('/set/mima')"
                  style="
                    width: 150px;
                    height: 30px;
                    line-height: 30px;
                    margin: 5px 0px;
                    cursor: pointer;
                  "
                >
                  修改密码
                </div>
                <div
                  @click="quit"
                  style="width: 150px; height: 30px; line-height: 30px; cursor: pointer"
                >
                  退出系统
                </div>
              </template>
              <div style="display: flex; align-items: center">
                <div class="img">
                  <img :src="user.imgUrl" alt="" />
                </div>
                <div class="title">{{ user.username }}</div>
                &nbsp; &nbsp;
                <CaretDownOutlined />
              </div>
            </a-popover>
          </div>
        </div>
      </div>
      <div class="main">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup lang="js">
import { RouterLink, RouterView, useRoute } from "vue-router";
import { ref, reactive, onMounted, watchEffect, watch } from "vue";
import { storeToRefs } from "pinia";
import { useLoginStore } from "@/store/loginPinia";
import router from "@/router";
import socket from "../store/socket";

import {HomeOutlined,UserOutlined,VideoCameraOutlined,BarChartOutlined,SettingOutlined,CaretDownOutlined} from "@ant-design/icons-vue";
let store = useLoginStore();
let { menulist, checkmenu } = storeToRefs(store);

let menuarr = [
  HomeOutlined,
  UserOutlined,
  VideoCameraOutlined,
  BarChartOutlined,
  SettingOutlined,
];

let list = ref([]);

const Jump = () => {
  router.push({
    path: '/set/suser',
  })
}

const quit = () => {
  let userid = JSON.parse(sessionStorage.getItem('user'))._id;
  localStorage.removeItem('accessToken');
  sessionStorage.removeItem('roleid');
  localStorage.removeItem('refreshToken');
  socket.emit('userDisconnect', userid);  // 用户退出断开socket连接
  router.push('/');
}

// 函数实现，用于获取用户信息
const getUser= () => {
  const storedUser = sessionStorage.getItem('user');
  // 判断用户信息是否存在，如果存在则解析为对象，否则返回"未登录"
  return storedUser ? JSON.parse(storedUser) : '未登录';
};

// 获取用户初始化数据，并将其放入 reactive 中
let user = reactive(getUser());




watchEffect(() => {
  const selectedItem = menulist.value.find((item) => item.name === checkmenu.value);

  // 检查是否找到了匹配的项，并且该项是否有 children 属性
  if (selectedItem && selectedItem.children) {
    let newlist = selectedItem.children;
    list.value = newlist;
  }
});

onMounted(() => {
  store.getMenu();
});

const route = useRoute(); // 获取当前路由对象
const isActive = ref(false); // 定义一个响应式变量
watch(
  route,
  (to, from) => {
    (isActive.value = to.fullPath), from;
  },
  { immediate: true }
); // immediate: true 表示立即执行一次
</script>
<style scoped lang="scss">
#more-home {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: left;

  .llef {
    width: 4%;
    height: 100%;
    background-color: #080c27;
    text-align: center;

    .top {
      margin: 12px 0px;

      img {
        margin-left: -2px;
      }

      p {
        color: white;
        font-size: 15px;
      }
    }

    .mainbox {
      color: white;

      .box {
        width: 46px;
        margin: 30px auto;
        height: 46px;
        border-radius: 6px;

        .icon {
          margin-top: 12px;
          color: white;
          font-size: 22px;
        }

        a {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }

      .box:hover {
        background-color: #3dd4a7;
      }

      .box.active {
        background-color: #3dd4a7;
      }
    }
  }

  .left {
    width: 12%;
    height: 100%;
    background-color: #ffffff;

    .top {
      width: 100%;
      font-size: 17px;
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #a2a2a2;
      padding-left: 15px;
      box-sizing: border-box;
      background-color: #ffffff;
    }

    .main {
      .box {
        text-align: left;
        width: 90%;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        padding-left: 14px;
        box-sizing: border-box;
        margin: 25px auto;

        a {
          text-decoration: none;
          color: #4d4c4c;
          display: inline-block;
          width: 100%;
        }
      }

      .box:hover {
        background-color: #3dd4a7;

        a {
          color: white;
        }
      }

      .box.active {
        background-color: #3dd4a7;

        a {
          color: white;
        }
      }
    }
  }

  .right {
    width: 84%;
    height: 100vh;
    background-color: pink;

    .top {
      width: 100%;
      height: 60px;
      background-color: #ffffff;
      border: 0.5px solid #d2cece;
      box-sizing: border-box;
      border-top: 0px;
      border-bottom: 1px solid #929191;

      .righ {
        width: 18%;
        height: 100%;
        line-height: 60px;
        float: right;
        display: flex;
        justify-content: space-between;
        margin-right: 20px;

        .icon {
          position: relative;
          top: 10px;
        }

        .user {
          margin: 0px 20px;
          display: flex;
          margin-right: 36px;
          align-items: center;
          height: 100%;
          .img {
            width: 40px;
            height: 40px;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }

          .title {
            margin-left: 15px;
          }
        }
      }
    }
    .main {
      width: 100%;
      height: calc(100vh - 60px);
      background-color: #f2fbfa;
      padding: 0px 10%;
      box-sizing: border-box;
    }
  }
}
</style>
